<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>

   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">
        // setState
        class App extends React.Component{

            state={a:0,b:0,c:0}

            handleClick = ()=>{
                // 1 验证组件实例
                // console.log(this); //组件实例

                //2 直接赋值 : 不能重新渲染render
                // this.state.a = 1
                // console.log(this.state.a); //1

                //3 setState : 改变值 & render
                // this.setState({
                //     a:1
                // })


                //4 setState : 异步的(条件:合成事件里 )  触发render
                // this.setState({
                //     a:1
                // })
                // console.log(this.state.a); // 0


                //5 多次调用setState 
                // 3次setState=>render 执行一次=> setState批量更新=>state数据全部修改 =>
                // 批量更新完毕=>render 
                // 这是react 性能优化机制 
                // this.setState({a:1})
                // this.setState({b:1})
                // this.setState({c:1})

                // console.log(this.state); //5.1 {a: 0, b: 0, c: 0}  setState是异步的

                
                // 6 获取异步的值
                // this.setState({a:1}) 
                // 通过回调方式获取获取最新的setState设置之后的值
                // this.setState({a:this.state.a+1},()=>{
                //     console.log('callback',this.state.a); // 能获取到值
                // })
                // console.log(this.state.a); // 0  异步原因 获取不到
                
            // 7 累加  隐患
            //   setState更新值 时候 有依赖于state 数据=>累加隐患=>不依赖于上一次的状态 计算下一次的装填
            //   this.setState({a:1}) 
            //   this.setState({a:this.state.a+1}) 
            //   this.setState({a:this.state.a+1}) 

            // this.setState({a:1}) 
            // this.setState({a:1}) 
            // this.setState({a:1}) 

            // 最后设置为准
            // this.setState({a:1}) 

            //   this.setState({a:1}) 
            //   this.setState({a:this.state.a+2}) 
            //   this.setState({a:this.state.a+3}) 
            
            // this.setState({a:1}) 
            // this.setState({a:2}) 
            // this.setState({a:3})  
            
            // 最后合并
            // this.setState({a:3}) 

            //7累加解决隐患: setState 传个函数 
        //     this.setState({a:1}) 
        //    // 参数  preState : 上一次的状态，多个setState之间形成了关联关系（state）
        //     this.setState((preState,props)=>{
        //             return {a:preState.a+1}
        //     }) 
        //     this.setState((preState,props)=>{
        //             return {a:preState.a+1}
        //     }) 
        //     this.setState((preState,props)=>{
        //             return {a:preState.a+1}
        //     }) 

            //理解: 队列思维
            // [
            //     (preState,props)=>{
            //             return {a:preState.a+1}
            //     },
            //     (preState,props)=>{
            //             return {a:preState.a+1}
            //     },
            //     (preState,props)=>{
            //             return {a:preState.a+1}
            //     }   
            // ]

             // 8 获取异步的值
            //  场景1
            this.setState({a:1}) 
            
            // 通过回调方式获取获取最新的setState设置之后的值
            // this.setState({a:this.state.a+1},()=>{
            //     console.log('callback1',this.state.a); // 能获取到值
            // })
            
            // this.setState({a:0+1},()=>{
            //     console.log('callback1',this.state.a); // 能获取到值
            // })
            
            // 场景2
            // this.setState({a:1}) 
            
            // this.setState((preState,props)=>{
            //          return {a:preState.a+1}
            //  },()=>{
            //      console.log('callback2',this.state.a); 
            //  }) 

            // this.setState((1,props)=>{
            //          return {a:1+1}
            //  },()=>{
            //      console.log('callback2',2); 
            //  }) 

            // console.log(this.state.a); // 0  异步原因 获取不到

            //场景3 
            this.setState({a:1}) 
            
            this.setState({a:this.state.a+1},()=>{
                console.log('callback1',this.state.a); // 能获取到值
            })
            this.setState((preState,props)=>{
                     return {a:preState.a+1}
             },()=>{
                 console.log('callback2',this.state.a); 
             }) 

            // this.setState({a:1}) 
            
            // this.setState({a:0+1},()=>{
            //     console.log('callback1',this.staste.a); // 能获取到值
            // })

            // this.setState((1,props)=>{
            //          return {a:1+1}
            //  },()=>{
            //      console.log('callback2',2); 
            //  }) 
            
            //setState 在合成事件里面就似乎异步

            //参数方式
            // setState({}) // 设置值 // log 打印无法获取setState设置的值
            // setState({},()=>{}) // 没依赖 获取值
            // setState(()=>{},()=>{}) // 有依赖 获取值

            }

            render(){
                console.log('----render----');
                return (
                    <div>
                        <h1>{this.state.a}</h1>
                        <h1>{this.state.b}</h1>
                        <h1>{this.state.c}</h1>
                         {/*onClick onChange : 合成事件 对事件进行包装 (事件代理 委托)*/}
                        <button onClick={this.handleClick}>click</button>
                    </div>
                )
            }
        }

    
        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>